.main_content {
  width: 100%;
  height: 100%;
  background: #f9fcff;
  border-radius: 20px;
}

.content {
  width: 100%;
  height: 100%;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.bg {
  width: 1244rpx;
  height: 434rpx;
  position: absolute;
  bottom: -30rpx;
  left: -50rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.left {
  width: 866rpx;
  height: 100%;
}

.right {
  width: 772rpx;
  height: 100%;
}

.top {
  width: 100%;
  height: 100rpx;
}

.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  view {
    margin-right: 20rpx;
    font-size: 36rpx;
    color: #818487;
  }

  text {
    font-size: 32rpx;
    color: #fbb33a;
  }
}

.bottom {
  width: 100%;
  height: calc(100% - 100rpx);
}

.tips {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tips_left {
  margin-right: 70rpx;
  font-size: 36rpx;
  color: #262626;
  position: relative;

  &::after {
    content: "";
    width: 40rpx;
    height: 19rpx;
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/title_bg.png) center center/cover no-repeat;
    position: absolute;
    bottom: -19rpx;
    left: 16rpx;
  }
}

.tips_right {
  font-size: 24rpx;
  color: #050505;
}

.calendar {
  margin-top: 50rpx;
  margin-bottom: 30rpx;
}

.calendar_list {
  width: 866rpx;
  height: 170rpx;
  display: flex;
}

.calendar_item {
  width: 110rpx;
  height: 170rpx;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  &:not(:last-child) {
    margin-right: 16rpx;
  }

  &.complete {
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/calendar_bg_active.png) center center/cover no-repeat;

    .calendar_text {
      color: #ffffff;
    }
  }

  &.incomplete {
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/calendar_bg.png) center center/cover no-repeat;

    .calendar_text {
      color: #919191;
    }
  }
}

.calendar_image {
  height: 67rpx;

  image {
    height: 100%;
  }
}

.calendar_text {
  font-size: 24rpx;
}

.nav {
  width: 100%;
  padding-left: 60rpx;
  padding-right: 20rpx;
}

.nav_item {
  width: 100%;
  display: flex;
  justify-content: space-between;

  &:not(:last-child) {
    margin-bottom: 60rpx;
  }
}

.nav_text {
  font-size: 36rpx;
  color: #262626;
  position: relative;

  &::after {
    content: "";
    width: 40rpx;
    height: 19rpx;
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/title_bg.png) center center/cover no-repeat;
    position: absolute;
    bottom: -19rpx;
    left: 16rpx;
  }
}

.nav_icon {
  width: 36rpx;
  height: 36rpx;
}

.subtitle {
  width: 100%;
  display: flex;
  align-items: center;
}

.subtitle_text {
  margin-right: 80rpx;
  font-size: 36rpx;
  color: #262626;
}

.info {
  width: 100%;
  margin-top: 20rpx;
  position: relative;
}

.info_content {
  width: 772rpx;
  height: 184rpx;
  padding-left: 250rpx;
  background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/rank_bg.png) center center/cover no-repeat;
  display: flex;
  align-items: center;
}

.info_avatar {
  width: 90rpx;
  height: 90rpx;
  margin-right: 40rpx;
  border: 2rpx solid #fff;
  overflow: hidden;
  border-radius: 50%;

  image {
    width: 100%;
    height: 100%;
  }
}

.info_detail {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info_name {
  font-size: 30rpx;
  color: #131312;
}

.info_text {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #131312;
}

.info_tips {
  width: 248rpx;
  height: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 12rpx;
  left: 12rpx;

  text {
    font-size: 36rpx;
    color: #131312;
  }
}

.list {
  width: 100%;
  height: calc(100% - 256rpx);
  padding-top: 20rpx;
}

.list_content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.item {
  width: 100%;
  height: 126rpx;
  padding: 0 30rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/line_bg.png) bottom center/733rpx 12rpx no-repeat;
}

.item_num {
  font-size: 36rpx;
  color: #262626;
}

.item_info {
  margin-left: 100rpx;
  flex: 1;
  display: flex;
  align-items: center;
}

.item_avatar {
  width: 78rpx;
  height: 78rpx;
  margin-right: 40rpx;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.item_detail {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item_name {
  font-size: 28rpx;
  color: #000;
}

.item_text {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #b5b5b5;
}

.tabs1 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tabs1_item {
  width: 110rpx;
  height: 42rpx;
  background: rgba($color: #C8C7C5, $alpha: 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  &.active {
    background: rgba($color: #0086F8, $alpha: 0.5);
  }

  &:not(:last-child) {
    margin-right: 4rpx;
  }

  text {
    font-size: 30rpx;
    color: #050505;
  }
}

.tabs2 {
  width: 320rpx;
  display: flex;
  align-items: center;
  background: #0086f8;
  border-radius: 26rpx;
  overflow: hidden;
}

.tabs2_item {
  flex: 1;
  height: 52rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.active {
    border: 4rpx solid #dde4e9;
    background: #fff;
    border-radius: 26rpx;

    text {
      font-size: 30rpx;
      color: #58656E;
    }
  }

  &:not(:last-child) {
    margin-right: 4rpx;
  }

  text {
    font-size: 30rpx;
    color: #fff;
  }
}

.mask {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mask_title {
  width: 794rpx;
  height: 236rpx;
  padding-top: 30rpx;
  background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/zhuangshi.png) center center/cover no-repeat;
  display: flex;
  justify-content: center;

  text {
    font-size: 72rpx;
    color: #fff;
  }
}

.mask_text {
  width: 272rpx;
  height: 240rpx;
  margin-top: 64rpx;
  margin-bottom: 32rpx;
  padding: 20rpx;
  border: 3rpx solid #EEBE3D;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  image {
    width: 128rpx;
    height: 146rpx;
  }

  text {
    font-size: 28rpx;
    color: #FF9E01;
  }
}

.mask_tips {
  font-size: 32rpx;
  color: #FF9E01;
}

.mask_btn {
  width: 317rpx;
  height: 90rpx;
  margin-top: 78rpx;
  background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/btn_bg3.png) center center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 36rpx;
    color: #fff;
  }
}